<script setup>

const props = defineProps({
  showClose: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}
</script>

<template>
  <div class="del-wrap">
    <slot></slot>
    <div v-if="showClose" class="icon-close" @click.stop="handleClose">
      <icon size="12" icon="ep:close-bold"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.del-wrap {
  position: relative;

  &:hover > .icon-close {
    display: flex;
  }

  .icon-close {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.3);
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
}
</style>
